import React, { PureComponent } from 'react'
import { Layout } from 'antd'
import HeaderTool from '../header/HeaderTool'
import { Content, Footer } from 'antd/es/layout/layout'
import Login from '../login/Login'
import BottomTool from '../bottom/BottomTool'
import ReactDom from 'react-dom'
import layoutStyle from '../layout.less'
import LoginModule from '../header/LoginModule'

class BasicLayout extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      // padding: 5,
      headerHeight: 48,
      bottomHeight: 90
    }
  }

  componentDidMount () {
    this.resizeWindowUI()
  }

  resizeWindowUI = () => {
    // 取屏幕宽高
    // body宽高
    const { bottomHeight, headerHeight } = this.state
    const parentDom = ReactDom.findDOMNode(this).parentNode.parentNode
    let width = parentDom.offsetWidth
    let height = parentDom.offsetHeight
    const contentHeight = height - headerHeight - bottomHeight
    this.setState({
      width,
      height,
      contentHeight
    })
  }

  render () {
    const { bottomHeight, headerHeight, contentHeight, height } = this.state
    return (
      <React.Fragment>
        {/*<a href="/article.html" target="_blank">确认登录</a>*/}
        <Layout style={{ height }}>
          <header className={layoutStyle.header}>
            <HeaderTool height={headerHeight}/>
          </header>
          <Content className={layoutStyle.content}>
            <Login height={contentHeight}/>
          </Content>
          <Footer className={layoutStyle.footer}>
            <BottomTool height={bottomHeight}/>
          </Footer>
        </Layout>
        <LoginModule/>
      </React.Fragment>
    )
  }

}

export default BasicLayout
